<template>
  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input
        v-model="user.oldPassword"
        placeholder="请输入旧密码"
        type="password"
        show-password
      />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-popover v-model:visible="tipVisible" :width="250" placement="right">
        <template #reference>
          <el-input
            v-model="user.newPassword"
            placeholder="请输入新密码"
            type="password"
            show-password
            @focus="tipVisible = true"
            @blur="tipVisible = false"
          >
          </el-input>
        </template>
        <template #default>
          <div :class="['tip-content', { success: pwdTip.pass }]">
            <div>强度：{{ pwdTip.text }}</div>
            <el-progress :percentage="pwdTip.percent" :status="pwdTip.status" />
          </div>
          <div>请至少输入 6 个字符。请不要使用容易被猜到的密码。</div>
        </template>
      </el-popover>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
        v-model="user.confirmPassword"
        placeholder="请确认新密码"
        type="password"
        show-password
      >
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { updateUserPwd } from '@/api/system/user'
import { encrypt } from '@/utils/jsencrypt'
import { formRules } from '@/utils/valid/formRules'

const { proxy } = getCurrentInstance()

const router = useRouter()
const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
})

const equalToPassword = (rule, value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}
const rules = ref({
  oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    { required: true, validator: equalToPassword, trigger: 'blur' }
  ]
})
import { ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'

/** 提交按钮 */
function submit() {
  proxy.$refs.pwdRef.validate((valid) => {
    if (valid) {
      updateUserPwd(encrypt(`${user.oldPassword}`), encrypt(`${user.newPassword}`)).then(
        (response) => {
          console.log(response)
          if (response.code === 200) {
            ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
              confirmButtonText: '重新登录',
              type: 'warning',
              'show-close': false,
              closeOnClickModal: false,
              showCancelButton: false
            })
              .then(() => {
                useUserStore()
                  .logOut()
                  .then(() => {
                    router.push('/login')
                  })
              })
              .catch(() => {})
          }
          // proxy.$modal.msgSuccess('修改成功')
        }
      )
    }
  })
}
/** 关闭按钮 */
function close() {
  proxy.$tab.closePage()
}

// 密码强度校验提示
const tipVisible = ref(false)
const pwdTip = ref({
  pass: false,
  text: '弱',
  percent: 30,
  status: 'exception'
})
const strengthObj = [
  {
    pass: false,
    text: '弱',
    percent: 30,
    status: 'exception'
  },
  {
    pass: true,
    text: '安全',
    percent: 80,
    status: 'success'
  },
  {
    pass: true,
    text: '强',
    percent: 100,
    status: 'success'
  }
]

watchEffect(() => {
  const level = formRules.getPwdStrength(user.newPassword)
  pwdTip.value = strengthObj[level - 1]
})
</script>

<style lang="scss" scoped>
.tip-content {
  color: var(--el-color-danger);
}
.el-progress {
  width: 250px;
  margin: 5px 0;
}
.success {
  color: var(--el-color-success);
}
</style>
